<template>
  <div class='container'>
    <el-dialog
  title="预览文章"
  :visible="isDialogFormVisible"
  width="50%"
  :before-close="handleClose">
<h3>{{item.title}}</h3>
<div>
  <span >{{item.addDate}}</span>
  <span class="username">{{item.username}}</span>
  <span > <i class="el-icon-view"></i> {{item.visits}}</span>
</div>
<div class="articleBody" v-html="item.articleBody"></div>
</el-dialog>
  </div>
</template>

<script>
export default {
  props: ['item', 'isDialogFormVisible'],
  created () {
  },
  methods: {
    handleClose () {
      this.$emit('update:isDialogFormVisible', false)
    }
  }
}
</script>

<style scoped lang='less'>
.username{
margin: 10px ;
}
i{
 margin-right: 5px;
}
.articleBody{
  width: 100%;
  height: 80px;
  line-height: 40px;
  border-top: 1px dashed #ccc;
  background-color: #f5f5f5;
}
</style>
